<template>
  <div>
    <!-- 购物车 -->
    <!-- 缩小时的购物车 -->
    <div class="smallShopCar">
      <img src="../assets/img//1234923.png" @click="changeShow">
    </div>
    <!-- 大购物车 -->
    <!-- 创建单击事件委托 -->
    <div class="shopCar" @click="del" v-show="isShow" data-car>
      <table>
        <tr>
          <td>商品名称</td>
          <td>商品图片</td>
          <td>商品数量</td>
          <td>商品价格</td>
          <td>操作</td>
        </tr>
        <!-- 用v-for来动态生成购物车的内容 -->
        <tr v-for="(item,index) of shopCar" :key=index>
          <td>{{item.lname}}</td>
          <td><img :src="'http://127.0.0.1:3000/'+item.limg"></td>
          <!-- 创建单击事件并传入参数 -->
          <td><button @click="changeShopNum(-1,index)"
              :disabled="item.count<1?'':false">-</button><span>{{item.count}}</span>
            <button @click="changeShopNum(+1,index)">+</button>
          </td>
          <td>￥{{item.count*item.price}}</td>

          <td><button :data-i='index'>x</button></td>
        </tr>
        <tr></tr>
        <tr></tr>
      </table>
      <!-- 购物车关闭按钮 -->
      <div class="close" @click="changeShow()">
        <span>x</span>
      </div>
      <!-- 是否删除改数据的提示框 -->
      <div class="isDel fade">
        <h2>是否删除该商品</h2>
        <button>YES</button>
        <button>NO</button>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'car',
    data() {
      return {
        isShow: false,
        shopCar: [],
        i:0
      }

    },
    methods: {
      //缩小时的购物车控制是否隐藏
      changeShow() {
        // 显示购物车时发送axios
        this.axios.get('car').then(result => {
          this.shopCar = (result.data.result)
        })
        if (this.isShow == true) {
          //判断如果购物车关闭 触发axios
          this.isShow = false
          //遍历每一个商品
          for (let i = 0; i < this.shopCar.length; i++) {
            // 发送axios
            this.axios('update', {
              params: {
                count: this.shopCar[i].count,
                lid: this.shopCar[i].lid
              }
            }).then()
          }
        } else {
          this.isShow = true
        }
      },
      //购物车商品增加减少
      changeShopNum(n, i) {
        let newShopCarNum = this.shopCar[i].count += n
        if (newShopCarNum < 1) {
          let isDel = document.querySelector('.isDel');
          isDel.className = 'isDel flxe'
        } else {
          return newShopCarNum
        }

      },
      //购物车商品删除
      del(e) {
        //找到提示框
        let isDel = document.querySelector('.isDel')
        //对事件委托进行判断 只有是X 的按钮 才能触发
        if (e.target.nodeName == 'BUTTON' && e.target.innerHTML == 'x') {
           this.i = e.target.dataset.i;

          isDel.className = 'isDel flxe';
          //进行到这直接结束函数
          return
        }
        // 	<div class="shopCar" @click="del" v-show="isShow">
        // <table>
        //再次点击时在进行判断 只有YES按钮才能继续删除
        if (e.target.nodeName == 'BUTTON' && e.target.innerHTML == 'YES') {
          //只有最终删除的时候才发送axios
          this.axios('delete',{
            params:{
              lid:this.shopCar[this.i].lid
            }
          }).then(result=>{
            if(result.data.code==1){
              //因为是异步操作 所以需要等到服务器端确定已经删除才能进行dom的操作
            this.shopCar.splice(this.i, 1)
            isDel.className = 'isDel fade';
            }
          })
          //防止事件委托影响到其他按钮
        } else if (e.target.nodeName == 'BUTTON' && e.target.innerHTML == 'NO') {
          isDel.className = 'isDel fade';
        }
      }
    },
    created() {

    }
  }
</script>


<style scoped>
  /* 隐藏样式 */
  .fade {
    display: none;
  }

  /* 固定定位显示样式 */
  .flexd {
    display: block;
  }

  .close {
    width: 2rem;
    height: 2rem;
    font-size: 2rem;
    position: fixed;
    top: 20%;
    right: 3%;
  }

  .close:hover {
    cursor: pointer;
  }

  .shopCar {
    width: 45rem;
    height: 30rem;
    overflow-y: scroll;
    position: fixed;
    top: 20%;
    right: 2%;
    opacity: .8;
    background-color: #ffffff;
    padding: 1.6rem;

    /* display: none; */
  }

  .shopCar table {
    border-collapse: collapse;
  }

  .shopCar td {
    width: 9rem;
    padding: 1rem;
    text-align: center;
    border: black 1px solid;

  }

  .shopCar td button {
    width: 1.5rem;
    height: 1.5rem;
    margin: auto 0.1875rem;
  }

  .shopCar img {
    display: inline-block;
    width: 8rem;
  }

  /* 购物车显示隐藏按钮 */
  .smallShopCar img {
    position: fixed;
    top: 20%;
    right: -2%;
    width: 4rem;
    transition: 1s;
  }

  .smallShopCar img:hover {
    position: fixed;
    right: 1%;
    cursor: pointer;
  }

  /* 购物车是否删除提示 */
  .isDel {
    padding: 1.25rem;
    background-color: white;
    width: 20rem;
    height: 8rem;
    position: fixed;
    top: 40%;
    right: 16%;
    text-align: center;
    opacity: 1;
    box-shadow: #281A34 0.125rem 0.125rem 0.125rem;
    border-radius: 0.3125rem;
  }

  .isDel h2 {
    margin-bottom: 1.25rem;
  }

  .isDel button {
    background-color: cornflowerblue;
    border: #000000 0.0625rem solid;
    width: 4rem;
    height: 2rem;
  }

  .isDel button:hover {
    cursor: pointer;
  }
</style>
